<template>
	<div class="app-content">
		<p class="title">推荐语</p>
		<div class="textarea_wrap">
			<textarea v-model="form.recommend" placeholder="说一说为什么推荐它...." placeholder-class="ph" :maxlength="200"></textarea>
			<div class="count">{{currentNum}}/200</div>
		</div>
		<div class="generalize-content">
			<item-link :params="option" @goTo="toDetail" />
		</div>
		<div class="input_wrap">
			<div class="input_box" @click="isShowStaff">
				<div class="left">
					<div class="label">接收人</div>
					<span class="content">{{`已选择${form.user_id_arr.length}人`}}</span>
				</div>
				<view class="iconfont iconjiantou"></view>
			</div>
			<div class="input_box" @click="showDateTime">
				<div class="left">
					<div class="label">截止时间</div>
					<span class="content">{{form.end_time ? form.end_time : '请选择'}}</span>
				</div>
				<view class="iconfont iconjiantou"></view>
			</div>
			<picker mode="selector" :range="remindTimeList" :value="index" @change="remindTimeChange" range-key="text">
				<div class="input_box">
					<div class="left">
						<div class="label">提醒</div>
						<span class="content">{{remindTimeList[index].text}}</span>
					</div>
					<view class="iconfont iconjiantou"></view>
				</div>
			</picker>
		</div>
		<div class="generalize-save" @click="pushTeam">保存</div>
		<div class="generalize-notice_box" v-if="notice">
			<div class="generalize-notice">
				<div class="generalize-head_box">
					<h3>"推团队"是什么</h3>
					<view class="iconfont iconclose" @click="notice = false"></view>
				</div>
				<div class="dec">你可以选择任意一类内容，推给团队成员去推广获客，还可以查看团队的完成情况。</div>
			</div>
		</div>
		<open-VIP :show.sync="showVipPop" />
		<date-time-picker ref="dateTime" @submit="dateTimeSubmit" color="#FFD11A" />
	</div>
</template>

<script>
import { mapState } from 'vuex'
import { pushTeamNum } from '@/api/getGuest/index'
import itemLink from './components/itemLink'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import openVIP from '@/pages/components/dialog/openVIP'
import uniPopup from '@/components/uni-popup/uni-popup'
import dateTimePicker from '@/components/simple-datetime-picker'
import qs from 'qs'
import { getBasicUser } from '@/utils/auth'

export default {
	name: 'pushTeam',
	components: {
		itemLink,
		AppWrapperEmpty,
		openVIP,
		uniPopup,
		dateTimePicker
	},
	data() {
		return {
			showVipPop: false,
			notice: true,
			remindTimeShow: false,
			dateTimeShow: false,
			currentQuery: {},
			vip_level: '',
			form: {
				recommend: '',
				tips_type: 2,
				end_time: '',
				user_id_arr: []
			},
			option: {},
			index: 0,
			remindTimeList: [{ text: '截止前15分钟', id: 2 }, { text: '不提醒', id: 1 }, { text: '截止前1小时', id: 3 }, { text: '截止前3小时', id: 4 }, { text: '截止前1天', id: 5 }]
		}
	},
	onLoad(option) {
		console.log(option, '推给团队 option')

		if (option.staff) {
			this.form.user_id_arr = decodeURIComponent(option.staff).split(',')
		}
		let formData = option.formData
		if (formData) {
			console.log(decodeURIComponent(option.formData), 'decodeURIComponent(option.formData)')
			// console.log(JSON.parse(decodeURIComponent(option.formData)), 'JSON.parse(decodeURIComponent(option.formData))')
			formData = JSON.parse(decodeURIComponent(option.formData))
			this.form.recommend = formData.recommend
			this.form.end_time = formData.end_time
			this.index = formData.index
		}
		this.option = option
		this.option.title = decodeURIComponent(option.title)
		this.option.imgUrl = decodeURIComponent(option.imgUrl)
	},
	onShow() {
		this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
		getBasicUser(this.currentQuery.owner_user_id || uni.getStorageSync('user_id')).then(res => {
			this.vip_level = res.vip_level
		})
	},
	computed: {
		...mapState({
			user_id_arr: state => state.user.staffIDList
		}),
		currentNum() {
			return this.form.recommend.length
		}
	},
	methods: {
		dateTimeSubmit(e) {
			this.form.end_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
		},
		showDateTime() {
			this.$refs.dateTime.show()
		},
		isShowStaff() {
			if (!this.vip_level && this.$util.shieldReview()) {
				this.showVipPop = true
				return
			}
			const { recommend, end_time, user_id_arr } = this.form
			const formData = {
				recommend: recommend,
				index: this.index,
				end_time: end_time
			}
			if (user_id_arr.length) {
				formData.user_id_str = user_id_arr.join(',')
			}
			const params = {
				filter: 'team',
				tips: '去添加员工',
				isSelect: 'true',
				...this.option,
				fromPage: 'pushTeam',
				formData: JSON.stringify(formData)
			}
			console.log(params, '推给团队 --> 选择员工')
			uni.redirectTo({
				url: `/pages/admin/staffManage/selectStaff?${qs.stringify(params)}`
			})
		},
		remindTimeChange(e) {
			this.index = e.target.value
		},
		pushTeam() {
			let origin = {}
			if (!this.$util.isEmpty(this.option.from_origin)) {
				origin = {
					from_origin: this.option.from_origin
				}
			}
			if (!this.form.user_id_arr.length) {
				uni.showToast({
					title: '请选择员工',
					icon: 'none'
				})
				return
			}
			this.form.tips_type = this.remindTimeList[this.index].id
			pushTeamNum({
				...this.form,
				type: this.option.type,
				multi_id: this.option.id,
				...origin,
				user_id_arr: this.user_id_arr
			}).then(res => {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
				setTimeout(() => {
					if (this.option.from === 'index') {
						uni.navigateTo({
							url: `/pages/design/designCompany/indexNew?owner_user_id=${this.option.owner_user_id}&share_user_id=${this.option.share_user_id}`
						})
					} else {
						uni.navigateBack()
					}
				}, 500)
			})
		},
		toDetail() {}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-bottom: 55px;
	}
	.input_wrap {
		padding-left: 30px;
		background-color: #fff;
		.input_box {
			border-top: 1px solid rgba(238, 238, 238, 1);
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 30px;
			.left {
				height: 100%;
				display: flex;
				align-items: center;
				.label {
					width: 211px;
					font-size: 28px;
					color: rgba(102, 102, 102, 1);
				}
				.content {
					font-size: 28px;
					color: rgba(51, 51, 51, 1);
				}
			}
			.iconjiantou {
				color: rgba(204, 204, 204, 1);
			}
		}
	}
	.title {
		padding: 29px 30px 21px;
		font-size: 30px;
		color: rgba(102, 102, 102, 1);
	}
	.generalize-content {
		background-color: #ffffff;
		margin-top: 20px;
		padding: 30px;
	}
	.generalize-save {
		width: 690px;
		height: 90px;
		background: rgba(255, 209, 26, 1);
		border-radius: 45px;
		margin: 60px auto 40px;
		text-align: center;
		line-height: 88px;
		color: #3a1b04;
		font-size: 32px;
	}
	.generalize-notice_box {
		padding: 0 30px;
		& .generalize-notice {
			border-radius: 20px;
			background-color: #ffffff;
			padding: 30px 22px 30px;
			& .generalize-head_box {
				display: flex;
				& h3 {
					color: #999999;
					flex: 1;
					font-size: 24px;
					font-weight: 400;
				}
				& .iconclose.iconfont {
					color: #999999;
					font-size: 20px;
					padding: 3px;
				}
			}
			& .dec {
				color: #333333;
				font-size: 24px;
				font-weight: 400;
				line-height: 36px;
				margin: 28px 0 8px;
			}
		}
	}
</style>
